<template>
  <div>
    <el-aside width="200px">
      <div class="Memuclass">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
        >
          <nav-child
            v-for="item in menuData"
            :key="item.url"
            :navItem="item"
          ></nav-child>
        </el-menu>
      </div>
    </el-aside>
  </div>
</template>
<script>
import navChild from "./NavChild";
import hew from "./HelloWorld";
export default {
  components: {
    navChild,
    hew,
  },

  data() {
    return {
      menuData: [],
    };
  },

  mounted() {
    this.getMenu();
  },

  methods: {
    getMenu() {
      this.menuData = [
        { name: "首页", url: "/home" },
        { name: "v-for与v-if", url: "/ActivityManagement" },
        { name: "directiv指令", url: "/activityList" },
        { name: "vuex小结", url: "/pagethree" },
        {
          name: "一些小知识点",
          url: "/activitydetials",
          child: [
            { name: "css flex布局", url: "/activitydetials/detailsOne" },
            { name: "一个小算法", url: "/activitydetials/detailstwo" },
            { name: "ES6常用", url: "/activitydetials/detailsthree" },
          ],
        },
        {
          name: "css 动画",
          url: "/activityPlan",
          child: [
            { name: "demo1", url: "/activityPlan/PlanOne" },
            { name: "动画demo2", url: "/activityPlan/PlanThree" },
          ],
        },
        {
          name: "canvas",
          url: "/pageSix",
          child: [
            { name: "页面6-1", url: "/pageSix/canvasdemo" },
            { name: "页面6-2", url: "/pageSix/vueExtendDemo" },
          ],
        },
        {
          name: "echart",
          url: "/activityPlan/PlanTwo/One",
        },
        {
          name: "组件封装",
          url: "/vueComponDemo",
        },
        {
          name: "luckysheet",
          url: "/luckysheet",
        },
      ];
    },
  },
};
</script>

<style scoped>
.el-menu {
  border-right: solid 1px #d3dce6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #d3dce6;
}
</style>